<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>实际报道统计
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div>
        <el-tabs type="card" @tab-click="handleClick">
          <el-tab-pane label="男生宿舍分配">
            <div style="padding-bottom: 10px">
              <el-form
                  :inline="true"
                  :model="query"
                  class="demo-form-inline"
              >
                <el-form-item label="专业">
                  <el-select
                      v-model="query.majorId"
                      filterable
                      clearable
                      placeholder="请选择专业"
                      @focus="getMajor()"
                  >
                    <el-option
                        v-for="item in optionsMajors"
                        :key="item.sid"
                        :label="item.majorName"
                        :value="item.sid"
                        :disabled="item.adviserId==query.adviserId ? false:true"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="班级">
                  <el-select
                      v-model="query.className"
                      filterable
                      clearable
                      placeholder="请选择班级"
                      @focus="getClassList()"

                  >
                    <el-option
                        v-for="item in classList"
                        :key="item.className"
                        :label="item.className"
                        :value="item.className"
                        :disabled="item.adviserId==query.adviserId ? false:true"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input
                      v-model="query.studentName"
                      placeholder="姓名"
                      clearable
                      class="inline-input"
                  ></el-input>
                </el-form-item>
                <el-form-item label="学号">
                  <el-input
                      v-model="query.studentId"
                      placeholder="学号"
                      clearable
                      class="inline-input"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="handleSearch"
                  >搜索
                  </el-button
                  >
                  <el-button
                      type="primary"
                      icon="el-icon-aim"
                      @click="handleChangeBed"
                  >床位互换
                  </el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="tableData"
                      border
                      class="table"
                      ref="multipleTable"
                      header-cell-class-name="table-header"
                      @selection-change="handleSelectionChange">
              <el-table-column type="selection"/>
              <el-table-column
                  :show-overflow-tooltip="true"
                  :prop="item.prop"
                  :label="item.label"
                  v-for="item in props"
                  :key="item.prop"
                  align="center"
              >
              </el-table-column>
              <el-table-column label="房间格局" align="center">
                <template #default="scope">
                  <p v-if="scope.row.roomurl!=null">
                    <!--                       <span v-for="(item,index) in scope.row.roomurl.split(',')" :key="index">-->
                    <el-image style="display: inline-flex;padding: 10px;width: 90%;height: 90%"
                              class="table-td-thumb"
                              :src="scope.row.roomurl"
                              :preview-src-list="[scope.row.roomurl]"
                    ></el-image>
                    <!--              </span>-->
                  </p>
                </template>
              </el-table-column>
              <el-table-column>
                <el-table-column
                    label="操作"
                    width="220px"
                    align="center"
                    fixed="right"
                >
                  <template #default="scope">
                    <el-button
                        type="text"
                        icon="el-icon-edit"

                        @click="handleMoveBed(scope.row)"
                    >微调宿舍
                    </el-button>
                    <el-button
                        type="text" icon="el-icon-delete" class="red"
                        @click="handleremoveBedStudent(scope.$index,scope.row.studentId)"
                    >移除宿舍
                    </el-button>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  :currentPage="query.pageNum"
                  :page-size="query.pageSize"
                  :page-sizes="[10, 20, 40]"
                  :total="pageTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </el-tab-pane>

          <el-tab-pane label="女生宿舍分配">
            <div style="padding-bottom: 10px">
              <el-form
                  :inline="true"
                  :model="query"
                  class="demo-form-inline"
              >
                <el-form-item label="专业">
                  <el-select
                      v-model="query.majorId"
                      filterable
                      clearable
                      placeholder="请选择专业"
                      @focus="getMajor()"
                  >
                    <el-option
                        v-for="item in optionsMajors"
                        :key="item.sid"
                        :label="item.majorName"
                        :value="item.sid"
                        :disabled="item.adviserId==query.adviserId ? false:true"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="班级">
                  <el-select
                      v-model="query.className"
                      filterable
                      clearable
                      placeholder="请选择班级"
                      @focus="getClassList()"
                  >
                    <el-option
                        v-for="item in classList"
                        :key="item.className"
                        :label="item.className"
                        :value="item.className"
                        :disabled="item.adviserId==query.adviserId ? false:true"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input
                      v-model="query.studentName"
                      placeholder="姓名"
                      clearable
                      class="inline-input"
                  ></el-input>
                </el-form-item>
                <el-form-item label="学号">
                  <el-input
                      v-model="query.studentId"
                      placeholder="学号"
                      clearable
                      class="inline-input"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="handleSearch"
                  >搜索
                  </el-button
                  >
                  <el-button
                      type="primary"
                      icon="el-icon-aim"
                      @click="handleChangeBed"
                  >床位互换
                  </el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="tableData"
                      border
                      class="table"
                      ref="multipleTable"
                      header-cell-class-name="table-header"
                      @selection-change="handleSelectionChange">
              <el-table-column type="selection"/>
              <el-table-column
                  :show-overflow-tooltip="true"
                  :prop="item.prop"
                  :label="item.label"
                  v-for="item in props"
                  :key="item.prop"
                  align="center"
              >
              </el-table-column>
              <el-table-column label="房间格局" align="center">
                <template #default="scope">
                  <p v-if="scope.row.roomurl!=null">
                    <!--                       <span v-for="(item,index) in scope.row.roomurl.split(',')" :key="index">-->
                    <el-image style="display: inline-flex;padding: 10px;width: 90%;height: 90%"
                              class="table-td-thumb"
                              :src="scope.row.roomurl"
                              :preview-src-list="[scope.row.roomurl]"
                    ></el-image>
                    <!--              </span>-->
                  </p>
                </template>
              </el-table-column>
              <el-table-column>
                <el-table-column
                    label="操作"
                    width="220px"
                    align="center"
                    fixed="right"
                >
                  <template #default="scope">
                    <el-button
                        type="text"
                        icon="el-icon-edit"

                        @click="handleMoveBed(scope.row)"
                    >微调宿舍
                    </el-button>
                    <el-button
                        type="text" icon="el-icon-delete" class="red"
                        @click="handleremoveBedStudent(scope.$index,scope.row.studentId)"
                    >移除宿舍
                    </el-button>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                  :currentPage="query.pageNum"
                  :page-size="query.pageSize"
                  :page-sizes="[10, 20, 40]"
                  :total="pageTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div>
      <el-dialog title="床位微调" v-model="dialogVisible" width="30%" :before-close="handleClose">
        <el-form :model="form" label-width="70px">
          <el-form-item label="学号">
            <el-input v-model="form.studentId" style="width: 50%" disabled></el-input>
          </el-form-item>
          <!--          <el-form-item label="公寓楼层">-->
          <!--            <el-select-->
          <!--                v-model="queryRoom.buildingId"-->
          <!--                filterable-->
          <!--                placeholder="请选择楼栋名"-->
          <!--                @focus="getBuilding"-->
          <!--                class="handle-input mr10"-->
          <!--            >-->
          <!--              <el-option-->
          <!--                  v-for="item in buildingList"-->
          <!--                  :key="item.value"-->
          <!--                  :label="item.name"-->
          <!--                  :value="item.sid"-->
          <!--              >-->
          <!--                <span style="float: left">{{ item.name }}</span>-->
          <!--                <span style="-->
          <!--                padding-left: 50px;-->
          <!--                color: var(&#45;&#45;el-text-color-secondary);-->
          <!--                font-size: 13px; ">{{ item.region }}</span>-->
          <!--                <span style="-->
          <!--                 padding-left: 50px;-->
          <!--                color: var(&#45;&#45;el-text-color-secondary);-->
          <!--                font-size: 13px; "-->
          <!--                >{{ item.type }}</span-->
          <!--                >-->
          <!--                <span style="-->
          <!--                 padding-left: 50px;-->
          <!--                color: var(&#45;&#45;el-text-color-secondary);-->
          <!--                font-size: 13px; "-->
          <!--                >【{{ item.floor }}】层</span-->
          <!--                >-->
          <!--              </el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="公寓">
            <el-select v-model="queryFloor.name" filterable placeholder="选择公寓"
                       @change="getBuilding"
                       class="handle-input mr10">
              <el-option
                  v-for="item in buildingNames"
                  :key="item.sid"
                  :label="item.name"
                  :value="item.name"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="
                                        padding-left: 50px;
                                        color: var(--el-text-color-secondary);
                                        font-size: 13px; ">{{ item.region }}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="楼层">
            <el-select
                v-model="queryRoom.buildingId"
                filterable
                placeholder="请选择楼栋名"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.floor"
                  :value="item.sid"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间">
            <el-select
                v-model="queryRoom.roomId"
                filterable
                placeholder="请选择房间"
                @focus="getRoom()"
                class="handle-input mr10"
            >
              <el-option
                  v-for="item in roomList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.sid">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间格局">
            <div v-for="item in roomList"
                 :key="item.value">
              <div class="block">
                <el-image :src="item.roomurl" v-if="item.sid===queryRoom.roomId"
                          style="width: 70%;height: 98%"></el-image>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="床号">
            <el-select
                v-model="queryRoom.bedId"
                filterable
                placeholder="请选择楼栋名"
                @focus="getBed()"
                class="handle-input mr10"
            >
              <el-option
                  v-for="item in bedList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.sid">
              </el-option>
            </el-select>

          </el-form-item>
        </el-form>
        <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
              </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>

import request from "@/utils/request";
import {reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

const query = reactive({
  studentId: "",
  majorId: "",
  className: "",
  sexType: "",
  adviserId: "",
  pageNum: 1,
  pageSize: 10,
});
const props = [
  {label: "学号", prop: "studentId"},
  {label: "学生姓名", prop: "studentName"},
  {label: "身份证号", prop: "idCardNo"},
  {label: "性别", prop: "gender"},
  {label: "民族", prop: "nation"},
  // {label: "年级", prop: "grade"},
  {label: "学院名称", prop: "collegeName"},
  {label: "专业名", prop: "majorName"},
  {label: "班级名称", prop: "className"},
  {label: "所属床位号", prop: "bedName"},
  {label: "所属房间号", prop: "roomName"},
  {label: "所属公寓", prop: "buildingName"},
  {label: "所属楼层", prop: "floor"},
  {label: "所属校区", prop: "region"},
];
//左右数据选取
const handleClick = (tab) => {
  tableSelection.studentIds = []
  if (tab.props.label === "男生宿舍分配") {
    query.sexType = "1"
    queryFloor.type = "男生公寓"
    queryFloor.name = ""
    getbuildingNames();
  } else {
    query.sexType = "2";
    queryFloor.type = "女生公寓"
    queryFloor.name = ""
    getbuildingNames();
  }
  getData()
};
const tableData = ref([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
  query.adviserId = localStorage.getItem("sid")
  request
      .get("/bed/queryBedMove", {
        params: query,
      })
      .then((res) => {
        if (res.code == "0") {
          tableData.value = res.data.records;
          pageTotal.value = res.data.total;
        } else if (res.data==null) {
          ElMessage.warning("暂无信息");
          tableData.value = [];
        }else if (res.code === "18") {
          ElMessage.warning(res.msg);
          tableData.value = [];
        }else {
          tableData.value = [];
          ElMessage.warning(res.msg);
        }
      });
};
getData();
// //学院下拉框
// const options = ref([]);
// const getAllCollege = () => {
//   console.log(query.collegeId);
//   request.get("/college/getAllCollege").then((res) => {
//     options.value = res.data;
//     getMajor();
//   });
// };
// getAllCollege()
//专业下拉框
const optionsMajors = ref([]);
const getMajor = () => {
  request
      .get("/major/queryList", {
        params: {type: 1},
      })
      .then((res) => {
        optionsMajors.value = res.data;
      });
};
getMajor();
//班级下拉框
const classList = ref([]);
const getClassList = () => {
  request
      .get("/class/byMajorIdOrCollegeId", {
        params: {majorId: query.majorId},
      })
      .then((res) => {
        classList.value = res.data;
      });
};
// 查询操作 学院
// 查询操作
const handleSearch = () => {
  // query.className = query.className;
  query.pageNum = 1;
  getData();
};
// 分页大小
const handleSizeChange = (val) => {
  query.pageSize = val;
  getData();
};
// 分页导航
const handlePageChange = (val) => {
  query.pageNum = val;
  getData();
};

//床位微调
const form = reactive({
  studentId: "",
  sid: ""
});
const dialogVisible = ref(false)
const queryRoom = reactive({
  buildingId: "",
  roomId: "",
  bedId: "",
  type: ""
});
const handleMoveBed = (row) => {
  dialogVisible.value = true
  console.log(row)
  queryRoom.type = row.type
  queryFloor.type = row.type
  form.studentId = row.studentId
};
// const buildingList = ref([]);
// const getBuilding = () => {
//   queryRoom.roomId = ""
//   queryRoom.bedId = ""
//   request
//       .get("/building/getBuildingByType", {
//         params: {type: queryRoom.type},
//       })
//       .then((res) => {
//         buildingList.value = res.data;
//       });
// };
const roomList = ref([]);
const getRoom = () => {
  queryRoom.bedId = ""
  request
      .get("/room/getRoomList", {
        params: {buildingId: queryRoom.buildingId},
      })
      .then((res) => {
        roomList.value = res.data;
      });
};
const bedList = ref([]);
const getBed = () => {
  request
      .get("/bed/getBedList", {
        params: {roomId: queryRoom.roomId},
      })
      .then((res) => {
        bedList.value = res.data;
      });
};
const handleClose = (done) => {
  ElMessageBox.confirm("确定放弃选择或者关闭吗?")
      .then(() => {
        done();
      })
      .catch(() => {
        // catch error
      });
};
const save = () => {
  form.sid = queryRoom.bedId
  if (form.sid && form.studentId) {
    request.put("/bed", form).then(res => {
      if (res.code === '0') {
        ElMessage.success("更新成功")
        queryRoom.roomId = ""
        queryRoom.bedId = ""
        queryRoom.type = ""
        queryRoom.buildingId = ""
        getData()
      } else {
        ElMessage.error(res.msg)
      }
      dialogVisible.value = false  // 关闭弹窗
    })
  } else {
    ElMessage.error("信息必填")
  }

}
const queryFloor = reactive({
  type: "",
  name: "",
});
const buildingNames = ref([]);
const getbuildingNames = () => {
  request.get("/building/queryAreaList", {
    params: queryFloor.type,
  }).then((res) => {
    buildingNames.value = res.data;
  });
};
const options = ref([]);
const getBuilding = () => {
  request.get("/building/queryAreaListByName", {
    params: queryFloor,
  }).then((res) => {
    options.value = res.data;
  });
};
getbuildingNames()
const tableSelection = reactive({
  studentIds: [],
});
const handleSelectionChange = (val) => {
  tableSelection.studentIds = [];
  for (var i in val) {
    tableSelection.studentIds.push(val[i].studentId);
  }
};
//床位交换
const handleChangeBed = () => {
  if (tableSelection.studentIds.length === 0) {
    ElMessage.error("请选择学生");
    return;
  }
  if (tableSelection.studentIds.length !== 2) {
    ElMessage.error("有且只有两个学生互换");
    return;
  }
  ElMessageBox.confirm("确定交换吗？", "提示", {
    type: "warning",
  }).then(() => {
    request.post("/bed/distributionChangeBed", tableSelection).then((res) => {
      if (res.code === null) {
        ElMessage.success("分配成功");
        getData();
      } else {
        tableSelection.studentIds = [];
        // ElMessage.error("分配失败");
        ElMessage.warning(res.msg);
      }
    });
  });
};
const root = "/goods/";
// 床位移除操作
const handleremoveBedStudent = (index, studentId) => {
  // 二次确认删除(scope.$index, scope.row.sid)"
  ElMessageBox.confirm("确定要移除吗？", "提示", {
    type: "warning",
  })
      .then(() => {
        request.get("/bed/removeBedStudent", {
          params: {studentId: studentId}
        }).then((res) => {
          if (res.code === null) {
            ElMessage.success("移除成功");
            tableData.value.splice(index, 1);
          } else {
            ElMessage.error("移除失败");
          }
        });
      })
      .catch(() => {
      });
};
</script>

<style scoped>
.red {
  color: #ff0000;
}
</style>
